<template>
  <view class="container">
    <!-- 视频播放器区域 -->
    <video
      ref="videoPlayer"
      class="video-player"
      :src="videoAbout.videoUrl"
      controls
      @fullscreenchange="onFullScreenChange"
    ></video>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      videoAbout: {}, // 用于存储深复制后的数据
      statusBarHeight: 0 // 存储状态栏高度
    };
  },
  onLoad() {
    // 获取系统信息，获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight; // 动态设置状态栏高度
  },
  created() {
    // 在组件创建时进行深复制
    this.videoAbout = JSON.parse(JSON.stringify(this.$store.state.videoAbout));
  },
  methods: {
    goBack() {
      uni.navigateBack(); // 返回到上一个页面
    },
    onFullScreenChange(event) {
      const isFullScreen = event.target.webkitDisplayingFullscreen || event.target.fullscreen;
      if (isFullScreen) {
        // 进入全屏时强制横屏
        this.setLandscapeMode();
      } else {
        // 退出全屏时恢复竖屏
        this.setPortraitMode();
      }
    },
    setLandscapeMode() {
      // 强制横屏
      if (screen.orientation && screen.orientation.lock) {
        screen.orientation.lock('landscape').catch((err) => {
          console.error('横屏失败:', err);
        });
      }
    },
    setPortraitMode() {
      // 恢复竖屏
      if (screen.orientation && screen.orientation.lock) {
        screen.orientation.lock('portrait').catch((err) => {
          console.error('竖屏失败:', err);
        });
      }
    }
  }
};
</script>

<style scoped>
  .container {
    position: relative;
  }

  .video-player {
    width: 100vw;
    height: 66vw;
    background-color: #fff;
    margin-top: 30px;
    /* 为视频播放器添加顶部留白 */
  }

  video {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .back-button {
    position: absolute;
    top: 20px;
    /* 向下调整返回按钮的垂直位置 */
    left: 10px;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* 添加背景色过渡效果 */
  }

  .back-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    /* 悬停时的背景效果 */
  }

  .back-icon {
    width: 36px;
    height: 36px;
    tint-color: #EEEEEE;
    /* 设置图标颜色 */
  }

  .block-top {
    padding: ;
  }
</style>
